<template>
    <Store1 @clickButton="clickButton"/>
    <Store2 @clickButton="clickButton"/>
    <div class="container console">
        <h1>日志</h1>
        <div v-for="(item, index) in consoleList" class="item">
            <strong>{{ consoleList.length - index }}.</strong>
            {{ item }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Store1 from "./components/store1.vue";
import Store2 from "./components/store2.vue";

const consoleList = ref<string[]>([])
const clickButton = (tag: string) => {
    consoleList.value.unshift(tag);
    console.log(tag);
}
</script>

<style>
body{
    margin: 0;
}

#app{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app .container{
    width: 25%;
    height: 50%;
    text-align: center;
    border: 1px solid #ccc;
}

p{
    display: flex;
    justify-content: center;
}

button{
    display: block;
    margin-bottom: 10px;
}

.console{
    width: 30%;
    overflow-y: scroll;
}

.console h1{
    position: fixed;
    top: calc(25% - 64px);
}

.item{
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    line-height: 24px;
}
</style>